<template>
  <div class="pdf-test-container">
    <h2>PDF.js 测试页面</h2>
    
    <div class="test-controls">
      <el-button @click="testPdfLoad" type="primary">测试 PDF 加载</el-button>
      <el-button @click="clearConsole" type="info">清除控制台</el-button>
    </div>
    
    <div class="test-result">
      <h3>测试结果：</h3>
      <div class="result-item">
        <strong>PDF.js 状态：</strong>
        <span :class="pdfStatus.class">{{ pdfStatus.text }}</span>
      </div>
      <div class="result-item">
        <strong>测试 URL：</strong>
        <span>{{ testUrl }}</span>
      </div>
    </div>
    
    <div class="pdf-viewer-wrapper" v-if="showViewer">
      <PdfViewer 
        :file-url="testUrl" 
        mode="preview"
        @error="handleError"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import PdfViewer from '@/components/PdfViewer.vue'

const showViewer = ref(false)
const testUrl = ref('/zapi-allin-sys/file/download/1') // 使用一个测试文件ID
const pdfStatus = ref({
  text: '未测试',
  class: 'status-unknown'
})

const testPdfLoad = async () => {
  
  try {
    // 动态导入测试
    const pdfjsLib = await import('pdfjs-dist')
    
    // 设置 worker - 使用本地文件
    if (pdfjsLib.GlobalWorkerOptions) {
      pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js'
    }
    
    // 获取 API
    let PDFJS = null
    if (pdfjsLib.getDocument) {
      PDFJS = pdfjsLib
    } else if (pdfjsLib.default && pdfjsLib.default.getDocument) {
      PDFJS = pdfjsLib.default
    } else {
      throw new Error('无法找到 getDocument 方法')
    }
    
    pdfStatus.value = {
      text: '初始化成功',
      class: 'status-success'
    }
    
    showViewer.value = true
    
    ElMessage.success('PDF.js 测试成功！')
    
  } catch (error) {
    console.error('PDF 测试失败:', error)
    pdfStatus.value = {
      text: `失败: ${error.message}`,
      class: 'status-error'
    }
    ElMessage.error('PDF.js 测试失败: ' + error.message)
  }
}

const handleError = (error) => {
  console.error('PDF Viewer 错误:', error)
  pdfStatus.value = {
    text: `组件错误: ${error.message}`,
    class: 'status-error'
  }
}

const clearConsole = () => {
  console.clear()
  ElMessage.info('控制台已清除')
}

onMounted(() => {
})
</script>

<style scoped>
.pdf-test-container {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.test-controls {
  margin-bottom: 20px;
}

.test-controls .el-button {
  margin-right: 10px;
}

.test-result {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.result-item {
  margin-bottom: 8px;
}

.result-item strong {
  display: inline-block;
  width: 120px;
}

.status-unknown {
  color: #909399;
}

.status-success {
  color: #67c23a;
  font-weight: bold;
}

.status-error {
  color: #f56c6c;
  font-weight: bold;
}

.pdf-viewer-wrapper {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
</style>
